{% extends "iphone/base.html" %}

{% block extrahead %}
<script type='text/javascript' src='/appmedia/js/jquery_min.js'></script>
<script language="JavaScript" type="text/javascript">
var deleted_ids = "";

//-----------------------------------------
function TaskIsDone(el) {
	if (el.alt == "undone") {
		el.src = "/appmedia/done.gif";
		el.alt = "done";
	}
	else {
		el.src = "/appmedia/undone.gif";
		el.alt = "undone";
	}
}

//-----------------------------------------
function ShowForm() {
	$('#add_item_wnd').css('display', 'inline');
	$('#add_item_wnd').css('visibility', 'visible');
	$('#id_name').val("");
	$('#id_name').focus();
	$('#edit_id').val("");
}

//-----------------------------------------
function HideForm() {
	$('#add_item_wnd').css('display', 'none');
	$('#add_item_wnd').css('visibility', 'hidden');
	
	if ($('#edit_id').val() != "") {
		$('#edit_id').val("");
		document.getElementById('edit_div').id = "";
	}
}

//-----------------------------------------
function HideMessage() {
	$('#message').hide();
}

//-----------------------------------------
function SaveTask() {
	var task_name = $("#id_name").val();
	
	if ($('#edit_id').val() != "") {
		$('#edit_div').html(task_name);
		$('#edit_id').val("");
		document.getElementById('edit_div').id = "";
	}
	else {
		var new_row = document.getElementById("tasks_table").insertRow(0);
		
		var a = new_row.insertCell(0);
		var b = new_row.insertCell(1);
		var c = new_row.insertCell(2);
		var d = new_row.insertCell(3);
		
		a.innerHTML = '0';
		a.className= 'task_id';
		
		b.innerHTML = '<img src="/appmedia/undone.gif" onclick="javascript:TaskIsDone(this)" alt="undone" />';
		b.className= 'task_item';
		b.width="16";
		
		c.innerHTML = '<div class="task_name" onclick="EditTask(this)">'+ task_name + '</div>'; // <span class="info"> 0.0 h</span>
		c.className= 'task_item';
		c.width="*";
		
		d.innerHTML = '<img src="/appmedia/delete.gif" alt="[X]" onclick="javascript:DeleteTask(this)" />';
		d.className= 'task_item';
		d.width="16";
	}
	HideForm();
}

//-----------------------------------------
function EditTask(el) {
	el.id = "edit_div";
	ShowForm();
	$('#id_name').val(el.innerHTML);
	$('#edit_id').val("edit_div");
}

//-----------------------------------------
function DeleteTask(el) {
	index = el.parentNode.parentNode.rowIndex;
	if (deleted_ids.length > 0) {deleted_ids += ",";}
	deleted_ids += document.getElementById("tasks_table").rows[index].cells[0].innerHTML;
	document.getElementById("tasks_table").deleteRow(index);
}

//-----------------------------------------
function SendData(new_url) {
	var data = {
		"count" : 0,
		"deleted_ids": deleted_ids,
	}
	var rows = document.getElementById("tasks_table").rows;
	var count = rows.length;
	data["count"] = count
	
	for (i=0;i<count; i++) {
		data["id" + i] = rows[i].cells[0].innerHTML;
		data["name" + i] = rows[i].cells[2].childNodes[0].innerHTML;
		data["done" + i] = rows[i].cells[1].childNodes[0].alt;
	}
	
	$('#message').html("Synchronization... <a href='javascript:HideMessage()'>Cancel</a>");
	$('#message').show();
	
	$.post('/iphone/sync/', data, function(data){
		if (data == "ok") {
			$('#message').hide();
			$('#message').html("Sync ok");
			$('#message').show();
			document.location = new_url;
		}
		else {
			$('#message').html("Couldn't reach server");
			$('#message').show("slow");
		}
	});
}

//-----------------------------------------
function Sync() {
	SendData("/iphone/offline/");
}

//-----------------------------------------
function GoOnline() {
	SendData("/iphone/");
}
</script>

<style>
div.task_name {
	display:inline;
	cursor:pointer;
}

.header {
	background: #b1e001; 
	border: 1px solid #91c001;
}

td.task_id {
	width: 1px;
	color: white;
}
</style>
{% endblock %}

{% block content %}
<div class="header">
	<!-- Whiteboard :: -->
	<a href="javascript:ShowForm()">
	<img src="/appmedia/add.gif" />
	Add task
	</a>
	::
{% if user.is_authenticated %}
	<a href="javascript:Sync()">
	<img src="/appmedia/sync.gif" />
	Sync
	</a>
	::
	<a href="javascript:GoOnline()">
	<img src="/appmedia/go_online.gif" />
	Go online
	</a>
{% else %}
	<a href="/iphone/">
	Login to use Sync&Go online
	</a>
{% endif %}
</div>

<div class="undo" id="message" style="display:none;"></div>

<div id="add_item_wnd" style="visibility:hidden;display:none;">
	<input id="id_name" name="name" type="text" style="width:95%" />
	<input type="hidden" name="time_spent" value="0.0" />
	<input type="hidden" id="edit_id" value="" />

	<div class="header">
		<button onclick="SaveTask()">Save task</button>
		::
		<a href="javascript:HideForm()">
		Cancel
		</a>
	</div>
</div>

<table id="tasks_table" cellspacing=0 class="tab" width=99%>
{% if tasks %}
	{% for task in tasks %}
	<tr>
		<td class="task_id">{{task.id}}</td>
		<td class="task_item" width=20>{% if task.done %}<img src="/appmedia/done.gif" onclick="javascript:TaskIsDone(this)" alt="done" />{% else %}<img src="/appmedia/undone.gif" onclick="javascript:TaskIsDone(this)" alt="undone" />{% endif %}</td>
		<td class="task_item" width="*"><div class="task_name" onclick="EditTask(this)">{{task.name}}</div>
			<span class="info">
			{% if task.project %}
				- {{task.project}}
			{% endif %}
			
			{% if task.task_date %}
				{{task.task_date}}
			{% endif %}
			
			{{task.time_spent|floatformat:1}} h
			</span>
		</td>
		<td class="task_item" width=16>
			<img src="/appmedia/delete.gif" onclick="javascript:DeleteTask(this)" />
		</td>
	</tr>
	{% endfor %}
{% endif %}
</table>

<p>&nbsp;</p>

<b class="nifty"></b>
<p style="background:#fad163;margin:0px;padding:2px;">
<img src="/appmedia/alert.gif" />
<b>Offline mode. <a href="javascript:GoOnline()">Go online?</a></b>
</p>
<b class="nifty"></b>
{% endblock %}

{% block footer %}
&copy; 2007-2008 <a href="http://gettingtasksdone.com/iphone/">Getting tasks done</a>
{% endblock %}

{% block analytics %}

{% endblock %}
